<template>
    <div>
        <!--        顶部导航栏-->
        <nav-bar>
            <template slot="center">注册bilibili</template>
            <template slot="right"><div @click="$router.push('/login')">登录<van-icon class="icon" name="arrow" /></div></template>
        </nav-bar>
        <!--        输入框-->
        <login-text label="昵称" style="margin: 4.167vw 0"
                    placeholder="请输入昵称"
                    rule="^[A-Za-z0-9\u4e00-\u9fa5]{2,10}$" :required="true"
                    @inputChange="res => data.name=res"></login-text>
        <login-text label="账号" placeholder="请输入账号"
                    rule="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" :require="true"
                    @inputChange="res => data.username=res"></login-text>
        <login-text label="密码" placeholder="请输入密码" :require="true"
                    type="password" rule="^[A-Za-z0-9]{6,16}$"
                    @inputChange="res => data.password=res"></login-text>
        <!--按钮-->
        <login-button label="注册" @commitLogin="commitLogin"></login-button>

        <div class="warning">
            <van-notice-bar
                    left-icon="fail"
                    text="昵称2~10个汉字或者字母数字组成"
            />
            <van-notice-bar
                    left-icon="fail"
                    text="账号4~15位字母和数字组成(字母开头)"
            />
            <van-notice-bar
                    left-icon="fail"
                    text="密码6~16位字母或者数字组成"
            />
        </div>

    </div>
</template>

<script>
    import NavBar from 'components/common/Login/LoginNav'
    import LoginText from 'components/common/Login/LoginText'
    import LoginButton from 'components/common/Login/LoginButton'
    export default {
        data(){
            return{
                data:{
                    name:'',
                    username:'',
                    password:''
                }
            }
        },
        components:{
            NavBar,
            LoginText,
            LoginButton
        },
        methods:{
            async commitLogin(){
                if (this.data.name && this.data.username && this.data.password){
                    const {data:res} = await this.$http.post('/register',this.data)
                    console.log(res);
                    if (res.code !== 200) return this.$toast.fail(res.msg)
                    this.$toast.success(res.msg)
                    setTimeout(() => {
                        this.$router.push('/login')
                    },1000)
                } else {
                    this.$dialog.alert({
                        message:'提交失败，请输入正确格式'
                    })

                }
            }
        }
    }
</script>

<style scoped>

</style>